<centre> Text </centre>
background-color: gray;
width: 00px
height: 00px
background-image: url("images/clouds-bg.jpg");


<style type="text/css">
      body {
         background: red url("images/small-sunflower.png") no-repeat fixed top right;
      }
   </style>
</head>
<body>
   <div style="color: white; font-size: 25px">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum vel enim ut iaculis. Donec volutpat diam sed iaculis pulvinar. Aenean sit amet risus ut velit sodales vehicula. Etiam sed ullamcorper sapien. Ut fermentum purus sed rhoncus fringilla. Fusce accumsan egestas tellus, quis hendrerit ipsum scelerisque in. Phasellus tristique arcu vitae nisi lacinia, eget condimentum lectus fringilla. In nisi nunc, consequat in varius at, viverra a arcu. Mauris interdum mattis eros, quis finibus diam facilisis a. Vivamus sagittis eros id massa mollis, sit amet convallis ligula mollis. Mauris vel tortor nec eros volutpat suscipit ullamcorper quis nibh.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum vel enim ut iaculis. Donec volutpat diam sed iaculis pulvinar. Aenean sit amet risus ut velit sodales vehicula. Etiam sed ullamcorper sapien. Ut fermentum purus sed rhoncus fringilla. Fusce accumsan egestas tellus, quis hendrerit ipsum scelerisque in. Phasellus tristique arcu vitae nisi lacinia, eget condimentum lectus fringilla. In nisi nunc, consequat in varius at, viverra a arcu. Mauris interdum mattis eros, quis finibus diam facilisis a. Vivamus sagittis eros id massa mollis, sit amet convallis ligula mollis. Mauris vel tortor nec eros volutpat suscipit ullamcorper quis nibh.
   </div>

MARGINS
margin-top: 30px;
         margin-left: 90px;
         background: lightgrey;
         border: 1px solid red;

<title> Try It Yourself </title>
   <style type="text/css">
      div#parent {
         margin-left: 50px;
         border: 1px solid green;
      }
      p#children {
         margin-left: inherit;
      }
   </style>
</head>
<body>
   <h3> The inherit Global Value </h3>
   <div id="parent">
      <p id="children"> Lorem ipsum dolor sit amet. This element's left margin is inherited from its parent element. </p>
   </div>

PADDING
padding-top: 30px;
         padding-right: 50px;
         padding-bottom: 70px;
         padding-left: 90px;
         background: lightgrey;
         border: 1px solid red;

COLOUR INPUT
<input type="color" id="demo" />
   <br />
   <button onclick="getValue()"> Get Value </button>
   
   <script type="text/javascript">
       function getValue() {
           alert(document.getElementById('demo').value);
       }
   </script>

Entering Valid Email Address
<form action="sample-page-handler.html">
       <input type="email" id="demo" name="email" />
       <input type="Submit" />
   </form>
   <br />
   <button onclick="getValue()"> Get Value </button>
   
   <script type="text/javascript">
       function getValue() {
           alert(document.getElementById('demo').value);
       }
   </script>

READ FILE INPUT
dy>
   <input type="file" id="demo" onchange="readFile();" />
   <!-- you should pick an image file for this demo to work -->
   <img src="" alt="The image file will be shown here." id="result" />
   
   <script type="text/javascript">
      function readFile() {
         var reader = new FileReader();
         var file = document.getElementById('demo').files[0];
   
         reader.onload = function(e) {
            document.getElementById('result').src = e.target.result;
         }
   
         reader.readAsDataURL(file);
      }
   </script>

ENTERING VALID NUMBER
<form action="sample-page-handler.html">
       <input type="number" id="demo" />
       <input type="submit" />
   </form>
   <br />
   <button onclick="getValue()"> Get Value </button>
   
   <script type="text/javascript">
       function getValue() {
           alert(document.getElementById('demo').value);
       }
   </script>

JAVASCRIPT

Dynamic styles

<p id="sample"> Hello World! </p> 
   <button onclick="changeStyles();"> Change Styles </button>
   
   <script type="text/javascript">
       function changeStyles() {
          document.getElementById("sample").style.fontSize = "20px";
          document.getElementById("sample").style.fontStyle = "italic";
          document.getElementById("sample").style.color = "gold";
       }
   </script>

Hide show Example

<div id="sample" style="width: 200px; height: 200px; background-color: gold; border: 5px solid black;"></div>
   <button onclick="show();"> Show </button>
   <button onclick="hide();"> Hide </button>
   
   <script type="text/javascript">
      function show() {
         document.getElementById("sample").style.display = "block";
      }
      
      function hide() {
         document.getElementById("sample").style.display = "none";
      }
   </script>

Change image

   <img src="images/example-1.jpg" style="max-width: 100%; height: auto;" id="sample" class="1" />
   <br />
   <button onclick="changeImage();"> Change Image </button>
   
   <script type="text/javascript">
      function changeImage() {
         document.getElementById("sample").src = "images/example-image.jpg";
      }
   </script>








SINGLE VALUE SELECTION
<input type="radio" name="gender" value="Male" id="male" />
   <label for="male"> Male </label>
   <br />
   <input type="radio" name="gender" value="Female" id="female" />
   <label for="female"> Female </label>
   <br />
   <button onclick="getValue()"> Get Value </button>
   
   <script type="text/javascript">
      function getValue() {
         var radios = document.getElementsByName('gender');
         var number_of_radios = radios.length;
   
         for(var i = 0; i < number_of_radios; i++) {
            if(radios[i].checked) {
               alert(radios[i].value);
            }
         }
      }
   </script>

RANGE BAR 
<input type="range" id="demo" />
   <br />
   <button onclick="getValue()"> Get Value </button>
   
   <script type="text/javascript">
       function getValue() {
           alert(document.getElementById('demo').value);
       }
   </script>
TEXT AREA
<textarea rows="5" cols="35" placeholder="Type your message here..."></textarea>

AUDIO INPUT PLAY
<audio src="audio.mp3" controls> Sorry your browser does not support embedding audios. </audio>
</body>

VIDEO PLAY
<video src="video.mp4" width="480" height="320" autoplay> Sorry your browser does not support embedding videos. </video>

with controls
<video src="video.mp4" width="480" height="320" controls> Sorry your browser does not support embedding videos. </video>

TEXTS
<style type="text/css">
      #p1 {
         color: red;
      }
      #p2 {
         color: rgb(23, 52, 89);
      }
   </style>
</head>
<body>
   <p id="p1"> My color is red! </p>
   <p id="p2"> My color is rgb(23, 52, 89)! </p>
</body>

texts align
<style type="text/css">
      #p1 {
         text-align: left;
      }
      #p2 {
         text-align: center;
      }
      #p3 {
         text-align: right; 
      }
      #p4 {
         text-align: justify;
      }
   </style>
</head>
<body>
   <p id="p1"> I am aligned left. </p>
   <p id="p2"> I am aligned center. </p>
   <p id="p3"> I am aligned right. </p>
   <p id="p4"> We are justified. We are justified

Text transform
<style type="text/css">
      #p1 {
         text-transform: none;
      }
      #p2 {
         text-transform: capitalize;
      }
      #p3 {
         text-transform: uppercase;
      }
      #p4 {
         text-transform: lowercase;
      }
   </style>
</head>
<body>
   <p id="p1"> My case is not changed. </p>
   <p id="p2"> My case is capitalize. </p>
   <p id="p3"> This text, yes this text's case is uppercase. </p>
   <p id="p4"> This text, yes this text's 

BUTTONS
   <style type="text/css">
      button {
         font-family: sans-serif;
      }
      #button1 {
         background-color: rgb(23, 52, 89);
         color: #f8f9f9;
      }
      #button2 {
         background-color: #903C56;
         color: #f8f9f9;
      }
      #button3 {
         background-color: #404242;
         color: #f8f9f9;
      }
   </style>
</head>
<body>
   <button id="button1"> Button </button>
   <button id="button2"> Button </button>
   <button id="button3"> Button </button>

Second Buttons

<style type="text/css">
      button {
         font-family: sans-serif;
         border: none;
      }
      #button1 {
         background-color: rgb(23, 52, 89);
         color: #f8f9f9;
      }
      #button2 {
         background-color: #903C56;
         color: #f8f9f9;
      }
      #button3 {
         background-color: #404242;
         color: #f8f9f9;
      }
   </style>
</head>
<body>
   <button id="button1"> Button </button>
   <button id="button2"> Button </button>
   <button id="button3"> Button </button>

Button padding
<style type="text/css">
      button {
         font-family: sans-serif;
         border: none;
         padding: 15px 30px;
      }
      #button1 {
         background-color: rgb(23, 52, 89);
         color: #f8f9f9;
      }
      #button2 {
         background-color: #903C56;
         color: #f8f9f9;
      }
      #button3 {
         background-color: #404242;
         color: #f8f9f9;
      }
   </style>
</head>
<body>
   <button id="button1"> Button </button>
   <button id="button2"> Button </button>
   <button id="button3"> Button </button>

Font buttons
<style type="text/css">
      button {
         font-family: sans-serif;
         border: none;
         padding: 15px 30px;
         margin: 5px;
         font-size: 20px;
      }
      #button1 {
         background-color: rgb(23, 52, 89);
         color: #f8f9f9;
      }
      #button2 {
         background-color: #903C56;
         color: #f8f9f9;
      }
      #button3 {
         background-color: #404242;
         color: #f8f9f9;
      }
   </style>
</head>
<body>
   <button id="button1"> Button </button>
   <button id="button2"> Button </button>
   <button id="button3"> Button </button>

Button no background
<style type="text/css">
      button {
         font-family: sans-serif;
         border: none;
         padding: 15px 30px;
         font-size: 20px;
         outline: none;
         margin: 5px;
         background: transparent;
      }
      #button1 {
         color: rgb(23, 52, 89);
         border: 4px solid rgb(23, 52, 89);
      }
      #button2 {
         color: #903C56;
         border: 4px solid #903C56;
      }
      #button3 {
         color: #404242;
         border: 4px solid #404242;
      }
   </style>
</head>
<body>
   <button id="button1"> Button </button>
   <button id="button2"> Button </button>
   <button id="button3"> Button </button>

Button cornors
<style type="text/css">
      button {
         font-family: sans-serif;
         border: none;
         padding: 15px 30px;
         font-size: 20px;
         outline: none;
         border-radius: 5px;
      }
      #button1 {
         background-color: rgb(23, 52, 89);
         color: #f8f9f9;
      }
      #button2 {
         background-color: transparent;
         color: #903C56;
         border: 4px solid #903C56;
      }
   </style>
</head>
<body>
   <button id="button1"> Button </button>
   <button id="button2"> Button </button>

Button click and mouse hoover
<style type="text/css">
      button {
         font-family: sans-serif;
         border: none;
         padding: 15px 30px;
         font-size: 20px;
         outline: none;
         margin: 10px;
         -webkit-transition-duration: 1s; /* for Safari */
         transition-duration: 1s;
      }
      #button1 {
         background-color: rgb(23, 52, 89);
         color: #f8f9f9;
         box-shadow: .5px .5px 1px 2px #000000;
      }
      #button2 {
         background-color: transparent;
         color: #903C56;
         border: 4px solid #903C56;
         box-shadow: .5px .5px 1px 2px #000000;
      }
      #button1:hover {
         background-color: #f8f9f9;
         color: rgb(23, 52, 89);
         box-shadow: 1px 1px 2px 3px #000000;
         cursor: pointer;
      }
      #button2:hover {
         background-color: #903C56;
         color: #f8f9f9;
         border: 4px solid #903C56;
         box-shadow: 1px 1px 2px 3px #000000;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <button id="button1"> Button </button>
   <button id="button2"> Button </button>
   <p> Since we can't mouse over a button in mobile you can try to click and hold the it to see the effects. </p>
   <p><b> Tip! </b> Remove the transition duration properties 

IMAGES
img {
         border-radius: 50%;
      }

Thumbnail Image

 <style type="text/css">
      img {
         border: 1px solid #ddd;
         border-radius: 5px;
         padding: 5px;
         width: 125px;
      }
   </style

Centred image
<style type="text/css">
      img {
         display: block;
         margin-left: auto;
         margin-right: auto;
         /* or margin: 0 auto */
         width: 170px;
      }
   </style>

Image Transparency

#img1 {
         opacity: 0.4;
      }
      #img2 {
         opacity: 0.7;
      }
      #img3 {
         /* default */
         opacity: 1.0;
      }
Positioning text on image
<style type="text/css">
      .container {
         position: relative;
      }
      span {
         position: absolute;
         top: 5px;
         left: 8px;
      }
      img {
         width: 100%;
         height: auto;
         opacity: 0.4;
      }
   </style>
</head>
<body>
   <div class="container">
      <img src="images/road.jpg" />
      <span> Top Left </span>
   </div>

DIV STUFF
div {
         width: 600px;
         background: gold;
      }

Second Stuff div
<style type="text/css">
      div {
         max-width: 600px;
         background: gold;
      }
   </style>
</head>
<body>
   <div> Hello World! I love Codeliber! </div>
   <p> Try rotating your device to landscape then back to portrait. </p>
   <p> Now the browser 

ROUND CORNERS
border-radius: 10px;
         width: 200px;
         height: 200px;
         padding: 10px;
         color: #f8f9f9;
         background: #173459;

Second test

border-top-left-radius: 10px;
         border-top-right-radius: 20px;
         border-bottom-right-radius: 30px;
         border-bottom-left-radius: 40px;
         width: 200px;
         height: 200px;
         padding: 30px;
         color: #f8f9f9;
         background: #173459;

FONT FAMILY
@font-face {
         font-family: myFont;
         src: url('css/fonts/Canterbury.ttf');
      }
      /* you can now use your custom font */
      h1 {
         font-family: myFont;
      }